<template>
  <div>

    <x-header :left-options="{showBack: true, backText: ''}" style="">通讯录</x-header>
    <div class="branch_content">
      <search
        v-model="keyword"
        :auto-fixed="false"
        position="fixed"
        top="46px"
        @on-change="filterSearch"
        ref="search"></search>

      <group class="contact-group">
        <cell v-for="(item, index) in searchResults" :key="index"
              class="cell-link-no-arrow"
              :title="item.user_login"
              :inline-desc="item.job||jobnull"
              :link="{name: 'MemberInfo', params:{memberid: item.id}}">
          <img slot="icon" class="cell-slot-icon" src="../img/gezx_grzl.png">
        </cell>
      </group>

    </div>

  </div>
</template>

<script>
import { XHeader, Search, Group, Cell, XButton } from "vux";
import { mapGetters } from "vuex";

export default {
  name: "Branch",
  components: {
    XHeader,
    Search,
    Group,
    Cell,
    XButton
  },
  mounted() {
    // this.$refs.search.setFocus()
    this.searchResults = this.items;
  },
  methods: {
    filterSearch(keyword) {
      if (!!keyword) {
        this.searchResults = this.items.filter(item => {
          return item.user_login.indexOf(keyword) !== -1;
        });
      } else {
        this.searchResults = this.items;
      }
    }
  },
  data() {
    return {
      items: [],
      searchResults: [],
      keyword: "",
      jobnull: "无"
    };
  },
  //计算属性
  computed: {
    ...mapGetters(["userList"])
  },
  //
  created() {
    this.$store.dispatch("getuserList", {
      department_id: this.$route.params.departmentid
    });
  },
  activated() {
    this.$store.dispatch("getuserList", {
      department_id: this.$route.params.departmentid
    });
  },
  deactivated() {
    this.items = []
  },
  //侦听属性
  watch: {
    userList: function(val) {
      this.items = val;
    },
    items: function(val) {
      this.searchResults = val;
    }
  }
};
</script>

<style lang="less">
.branch_content {
  padding: 2.875rem 0 0;
}

.contact-group {
  .cell-link-no-arrow {
    .weui-cell__ft:after {
      content: none !important;
    }
    .cell-slot-icon {
      display: block;
      width: 31/16rem;
      margin-right: 13/16rem;
    }
  }
  .weui-cells {
    margin-top: 0;
  }
}
</style>
